<template>
    <div>
        <a-button-group v-if="Object.keys(mediaObj).length === 0">
            <a-button @click="showSelector=true">
                <a-icon type="calendar"/>
                在素材库内选择语音
            </a-button>
            <a-upload
                    name="file"
                    :showUploadList="false"
                    :before-upload="beforeUpload"
                    @change="uploadHander"
                    :customRequest="customRequest"
            >
                <a-button>
                    <a-icon type="upload"/>
                    上传新语音
                </a-button>
            </a-upload>
        </a-button-group>
        <a-card v-else :hoverable="true">
            <div slot="cover" style="border-bottom: 2px solid #F0F0F0;padding: 2px">
                <aplayer :music="{
                        title: mediaObj.mediaName,
                        src: getMaterialFileUrl(mediaObj.mediaId),
                        artist: '语音素材',
                        pic:$exMod.playerBg()
                        }"/>
            </div>
            <a-row>
                <a-col :span="22" class="text-ellipsis" :title="mediaObj.mediaName">
                    {{mediaObj.mediaName}}
                </a-col>
                <a-col :span="2">
                    <a-button shape="circle" icon="delete" size="small"
                              @click="onRemove"
                    />
                </a-col>
            </a-row>
        </a-card>
        <VoiceSelector v-if="showSelector" @closeModal="closeModal"/>
    </div>
</template>
<script>
    import {getMaterialFileUrl} from '../../../../../util/internal.api'
    import {addFileMaterial} from "../../public/http";
    import Aplayer from 'vue-aplayer';
    export default {
        props: ['dataSource'],
        components: {
            aplayer: Aplayer,
            VoiceSelector: () => import('../../component/material/VoiceSelector')
        },
        data() {
            return {
                mediaType: 'voice',
                showSelector: false,
                mediaObj: {},
            }
        },
        methods: {
            getMaterialFileUrl,
            closeModal(e) {
                this.showSelector = false;
                if (e.render) {
                    this.mediaObj = e.data;
                    this.$emit('callBack', this.mediaObj);
                }
            },
            onRemove() {
                this.mediaObj = {};
            },
            customRequest(data) {
                this.upLoading = true;
                const formData = new FormData();
                formData.append('file', data.file);
                formData.append("mediaType", this.mediaType);
                addFileMaterial(formData).then((res) => {
                    this.$exMod.ajaxMessage(res);
                    this.upLoading = false;
                    if (res.code === 0) {
                        this.mediaObj = res.data.result;
                        this.$emit('callBack', this.mediaObj);
                    }
                })
            },
            beforeUpload(file) {
                const allowTye = "mp3/wma/wav/amr";
                const fileType = file.type.split("/");
                const chekType = allowTye.split("/").findIndex((value, index, arr) => {
                    return value === fileType[1]
                });
                if (chekType < 0) {
                    this.$notification['error']({
                        message: '语音素材添加失败',
                        description: '语音素材只允许上传' + allowTye + '格式的语音文件'
                    });
                    return false;
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$notification['error']({message: '语音素材添加失败', description: "语音素材的大小不能超过 2MB!"});
                    return false;
                }
                return true
            },
            uploadHander(info) {
                if (info.file.status === 'done') {
                    this.$message.success(`${info.file.name} file uploaded successfully`);
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name} file upload failed.`);
                }
            },
        },
        created() {
            this.mediaObj = this.dataSource;
        }
    }
</script>
<style scoped>
</style>
